<template>
    <div class="f-tag-list" :style="{ left: $store.state.asideWidth }">

        <!-- <el-tabs v-model="activeTab" type="card" class="flex-1" @tab-remove="removeTab" style="min-width:100px;"
            @tab-change="changeTab">
            <el-tab-pane :closable="item.path != '/'" v-for="item in tabList" :key="item.path" :label="item.title"
                :name="item.path"></el-tab-pane>
        </el-tabs>

        <span class="tag-btn">
            <el-dropdown @command="handleClose">
                <span class="el-dropdown-link">
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="clearOther">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </span> -->
        <el-breadcrumb v-if="breadList.length>2" separator=">" style="margin-left:3px">
            <el-breadcrumb-item  v-for="item in breadList" :key="item.name">
              <router-link v-if="item.is_link" :to="item.name">
                {{item.title}}
              </router-link>
              <span v-else>{{item.title}}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>

    </div>
    <div style="height:44px;"></div>
</template>
<script setup>
import { useTabList } from "~/composables/useTabList.js"
import { computed, ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from "vue-router"
const route = useRoute()
const store = useStore()

const {
    activeTab,
    tabList,
    changeTab,
    removeTab,
    handleClose
} = useTabList()

//获取用户菜单
const asideMenus = computed(() => store.state.menus)
const breadList = ref([])
// 获取数据
function getData() {
    let currentPath = route.path;
    let list = [];
    let menuList = asideMenus.value || [];
    let route_name = currentPath;
    if (menuList.length > 0) {
        for (let i = 0; i < menuList.length; i++) {
            let currentMenu = menuList[i];
            if (currentMenu.children) {
                (currentMenu.children || []).every((item_c) => {
                    if (item_c.route === route_name) { //eg /unit/index
                        list.push({ name: currentMenu.route, title: currentMenu.title, is_link: false })
                        list.push({ name: item_c.route, title: item_c.title, is_link: true })
                    } else {
                        let data_cc = item_c.children || [];
                        data_cc.every((item_cc) => {
                            if (item_cc.route === route_name) {
                                list.push({ name: item_c.route, title: item_c.title, is_link: true });
                                list.push({ name: item_cc.route, title: item_cc.title, is_link: false })
                            }
                            return true;
                        });
                    }
                    return true;
                });
            }
        }
    }
    list = [{ name: "/", title: "首页", is_link: true }].concat(list);
    breadList.value = list;
}
getData()



watchEffect(()=>getData())




</script>
<style scoped>
.f-tag-list {
    @apply fixed bg-gray-100 flex items-center px-2;
    top: 64px;
    right: 0;
    height: 44px;
    z-index: 100;
}

.tag-btn {
    @apply bg-white rounded ml-auto flex items-center justify-center px-2;
    height: 32px;
}

:deep(.el-tabs__header) {
    border: 0 !important;
    @apply mb-0;
}

:deep(.el-tabs__nav) {
    border: 0 !important;
}

:deep(.el-tabs__item) {
    border: 0 !important;
    height: 32px;
    line-height: 32px;
    @apply bg-white mx-1 rounded;
}

:deep(.el-tabs__nav-next),
:deep(.el-tabs__nav-prev) {
    line-height: 32px;
    height: 32px;
}

:deep(.is-disabled) {
    cursor: not-allowed;
    @apply text-gray-300;
}
</style>